/**
 * 空状态指令 v-empty
 * @param emptyValue Object  包含文字内容content、图片img、visible是否显示
 */
import emptyImg from "@/assets/image/empty.jpg";
export default {
	inserted(el, binding, vnode) {
		console.log(binding);
		showNode(el, binding, vnode);
	},
	update(el, binding, vnode) {
		showNode(el, binding, vnode);
	},
};

function showNode(el, binding, vnode) {
	const { visible, content, img } = binding.value;
	if (visible) {
		el.style.position = el.style.position || "relative";
		const { offsetHeight, offsetWidth } = el;
		const image = `<img src="${img || emptyImg}" height="30%" width="30%"></img>`;
		const empty = document.createElement("div");
		empty.innerHTML = `<div style="text-align:center"> <div>${image}</div><div>${content || "暂无数据"}</div></div>`;

		empty.style.height = offsetHeight + "px";
		empty.style.width = offsetWidth + "px";
		empty.style.position = "absolute";
		empty.style.top = "0";
		empty.style.left = "0";
		empty.style.zIndex = "9999";
		empty.style.background = "#fff";
		empty.style.display = "flex";
		empty.style.justifyContent = "center";
		empty.style.alignItems = "center";
		el.appendChild(empty);
	} else {
		el.removeChild(el.lastChild);
	}
}
